<template>
  <div class="App">
    <Item title="数码">
      <ul>
        <li>手机</li>
        <li>平板</li>
      </ul>
      <hr>
      <template v-slot:detail>
        <p>查看更多手机</p>
      </template>
    </Item>
    <Item title="新闻">
      <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>搜狐</li>
      </ul>
      <template v-slot:detail>
        <span>查看更多新闻</span>
      </template>
    </Item>
    <Item title="电影">
      <ul>
        <li>美人鱼</li>
        <li>流浪地球</li>
      </ul>
      <template #detail>
        <button>查看更多电影</button>
      </template>
    </Item>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  name: "App",
  components:{Item}
}
</script>

<style scoped>
.App{
  display: flex;
  justify-content: space-around;
}
</style>